<template>
  <div>
      <div class="tab">
          <div class="yongjin"><span>一级佣金</span> <span style="color:red;">{{list.one}}%</span></div>
          <div class="yongjin"><span>二级佣金</span> <span style="color:red;">{{list.two}}%</span></div>
          <div class="bjian" @click="EditClick()">添加/修改</div>
      </div>

    <!-- 编辑弹框 -->
    <el-dialog
      title="添加/修改"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="bili"> 
         <div><input type="number" v-model="one" placeholder="请输入一级佣金比例"> <span>%</span></div>
         <div><input type="number" v-model="two" placeholder="请输入一级佣金比例"> <span>%</span></div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="EditOk()"
        >确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>


<script>
export default {
  data() {
    return {
        list:[],
        one:'',
        two:'',
        dialogVisible: false,
    };
  },
  created() {
      this.fenXiang()
  },
  methods: {

   //佣金比例获取
    fenXiang() {
      let url = "/config/getCommission";
      this.httpGet(url, res => {
        if (res.code == 200) {
            this.list = res.data
        }
      });
    }, 
    //编辑
    EditClick(v) {
      this.dialogVisible = true;
    }, 
    EditOk(){ 
      this.isOk()
    }
    ,
    isOk(){
        let self = this
        if(!this.one||!this.two){
            this.$message({
                message: '请输入一级/二级佣金比例',
                type: 'warning'
            });
            return
        }
        let url = "/config/editCommission";
        let params = {
            "one":this.one,
            "two":this.two 
        };
        this.httpPost(url, params, res => {
            if (res.code == 200) {
                self.dialogVisible = false;
                self.$message({
                    message: '操作成功',
                    type: 'success'
                });
                self.one=''
                self.two = ''
                self.fenXiang()
            }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.tab{
    width: 200px;
    height: 200px;
    padding-left: 20px;
    border-radius: 5px;
    overflow: hidden;
}
.tab img{
    width: 100%;
    display: block;
}
.bjian{
    text-align: center;
    background: #409eff;
    line-height: 30px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
} 
.bili div{
    position: relative;
    font-size: 15px;
}
.bili span{
    position: absolute;
    right: 10px;
    top: 25%;
}
.bili input{
    height: 30px;
    width: 90%;
    margin-bottom: 10px;
}
.yongjin{
    line-height: 40px;
    font-size: 15px;
}
</style>
